<template>
  <div class="app-container calendar-list-container">
      <el-form>
        <div style="font-size:20px;font-weight:bold">客服电话：</div>
        <el-input
          v-model="selectQuery.phone"
          placeholder="请输入客服电话"
          size="medium"
          style="width: 300px;margin-right:15px;margin-top:7px"
        ></el-input>
        <el-button
          type="primary"
          size="medium"
          style="margin-top:40px;margin-bottom:40px "
          :loading="loading.edit"
          @click="update(6,selectQuery.phone)"
        >确定</el-button>
      </el-form>

 <el-form :model="selectQuery"
        :rules="bindRules"
           ref="bindForm"
        label-position="right"
  
        style="textalign:center">
        <div style="font-size:20px;font-weight:bold">不计费时长（[0-99] 分钟）：</div>
        <br>
        <el-form-item  prop="time"       type="primary" 
          size="medium"  style="margin-right:15px;margin-top:7px">
          <el-input style="width: 300px;"  type="number" clearable v-model="selectQuery.time" placeholder="请输入不计费时长："></el-input>
             <el-button
          type="primary"
          size="medium"
          style=" margin-left:15px"
          :loading="loading.edit"
          @click="updateTime(9,selectQuery.time)"
        >确定</el-button>
        </el-form-item>
      </el-form>
      <!-- 开灯 -->
      <el-form :model="open"
           ref="bindForm"
        label-position="right"
  
        style="textalign:center">
        <div style="font-size:20px;font-weight:bold">开灯时间：</div>
        <br>
        <el-form-item  type="primary" 
          size="medium"  style="margin-right:15px;">
          <el-select style="margin-right: 10px; width: 110px;" v-model="open.hour" placeholder="小时">
            <el-option
              v-for="item in 24"
              :key="item"
              :label="item-1"
              :value="item-1">
            </el-option>
          </el-select>

          <el-select style="margin-right: 10px; width: 110px;" v-model="open.minute" placeholder="分钟">
            <el-option
              v-for="item in timeList"
              :key="item"
              :label="item"
              :value="item">
            </el-option>
          </el-select>
          <el-button type="primary" size="medium" style=" margin-left:15px" :loading="loading.edit" @click="lightUp('0')"
        >确定</el-button>
        </el-form-item>
      </el-form>
      <!-- 关灯 -->
      <el-form :model="close"
           ref="bindForm"
        label-position="right"
  
        style="textalign:center">
        <div style="font-size:20px;font-weight:bold">开灯时间：</div>
        <br>
        <el-form-item  type="primary" 
          size="medium"  style="margin-right:15px;">
          <el-select style="margin-right: 10px; width: 110px;" v-model="close.hour" placeholder="小时">
            <el-option
              v-for="item in 24"
              :key="item"
              :label="item-1"
              :value="item-1">
            </el-option>
          </el-select>

          <el-select style="margin-right: 10px; width: 110px;" v-model="close.minute" placeholder="分钟">
            <el-option
              v-for="item in timeList"
              :key="item"
              :label="item"
              :value="item">
            </el-option>
          </el-select>
          <el-button type="primary" size="medium" style=" margin-left:15px" :loading="loading.edit" @click="lightUp('1')"
        >确定</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="success" size="medium" style=" margin-left:15px" @click="openDen"
        >开灯</el-button>
        <el-button type="danger" size="medium" style=" margin-left:15px" @click="closeDen"
        >关灯</el-button>
        </el-form-item>
      </el-form>

  </div>
</template>

<script>
import { VueEditor } from "vue2-editor";
import {
  updateSystemParamter,
  getSystemParamter,
  fileUpload,
  getOpenLight,
  getLightsOff,
  updateTime,
  openLight,
  lightsOff
} from "@/api/system";
export default {
  name: "system_address",

  data() {
      var valTime = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("不计费时长不能为空!"));
      }
      setTimeout(() => {
        var isNum = /^(1|([0-9]\d*))$/;
        if (!isNum.test(value)) {
          callback(new Error("大于或等于0的正整数!"));
        } else {
          if ((value + "").length > 2) {
            callback(new Error("时间间隔超过范围 2 位"));
          }
          callback();
        }
      }, 300);
    };
    
    return {
      loading: {
        edit: false
      },
      selectQuery: {
        phone: "",
        time:''
      },
      bindRules: {
        time: [{ required: true,validator: valTime, trigger: "change" }],
      },
      // 开灯
      open: {
        hour:'',
        minute:'',
        type: '0'
      },
       // 关灯
       close: {
        hour:'',
        minute:'',
        type: '1'
      },
      timeList:['0','10','20','30','40','50']
    };
  },
  components: {
    VueEditor
  },
  methods: {
    // 获取系统参数
    async getParameter() {
      const { data } = await getSystemParamter(6);
      
      this.selectQuery.phone = data.parameter;
    },
 // 获取系统参数
    async getParameterTime() {
      const { data } = await getSystemParamter(9);
      this.selectQuery.time = Math.floor(data.parameter/60000);
   
    },
    //修改系统参数
    async update(systemType, parameter) {
      const { data } = await updateSystemParamter(systemType,{
        parameter: parameter
      });
      this.$message.success("修改成功");
    },
   async updateTime(systemType, parameter) {
       this.$refs["bindForm"].validate(async valid => {
         if (valid) {
      const { data } = await updateSystemParamter(systemType,{
        parameter: parameter*60000
      });
      this.$message.success("修改成功");
         }
         });
    
    },
    handleAvatarSuccess(res, file) {
      this.selectQuery.four = URL.createObjectURL(file.raw);
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) { 
        this.$message.error("上传图片只能是 JPG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },

    async fileUploads({ file }) {
      // console.log("11111111");
      try {
        const fd = new FormData();
        fd.append("file", file);
        fd.append("fileName", "indexPic");
        const res = await fileUpload(fd);
        this.update(8, res.data);
      } catch (error) {}
    },
    // 开关灯提交
    async lightUp(num){
      let query = ''
      if(num == '0'){
        if(!this.open.hour.toString() || !this.open.minute.toString()) return this.$message.error("时间不能为空！");
        if(this.open.hour.toString() == '00') this.open.hour = '0'
        if(this.open.minute.toString() == '00') this.open.minute = '0'
        query = {
          hour: this.open.hour.toString(),
          minute: this.open.minute,
          type: num
        }
      } else if(num == '1') {
        if(!this.close.hour.toString() || !this.close.minute.toString()) return this.$message.error("时间不能为空！");
        if(this.close.hour.toString() == '00') this.close.hour = '0'
        if(this.close.minute.toString() == '00') this.close.minute = '0'
        query = {
          hour: this.close.hour.toString(),
          minute: this.close.minute,
          type: num
        }
      }
      await updateTime(query)
      this.$message.success("修改成功");
      this.getSwitch()
    },
    // 点击开灯
    async openDen(){
      await openLight()
      this.$message.success("开灯成功");
    },
    // 点击开灯
    async closeDen(){
      await lightsOff()
      this.$message.success("关灯成功");
    },
    // 获取开关灯时间
    async getSwitch(){
      const res = await getOpenLight()
      for (let key in res.data) {
        this.open.hour = key
        this.open.minute = res.data[key]
      }
      console.log('res',res);
      const res1 = await getLightsOff()
      for (let key in res1.data) {
        this.close.hour = key
        this.close.minute = res1.data[key]
      }
      console.log('res1',res1);
    }
  },
  created() {
    this.getParameter();
    this.getParameterTime();
    this.getSwitch()
  }
};
</script>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 16px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
